<div class="cloud-reading-modal-header modal-header">
    <h4 class="modal-title">
        <span>{{ "share_setting" | translate}}</span>
        <button type="button" class="close hide-share-plugin" ng-click="cancel()">&times;</button>
    </h4>
</div>
<style>
    .share-to-modal.modal-body{
        padding:15px 40px;
    }
    .textarea{
        border-radius: 4px;
        margin-top: 10px;
        width: 100%;
        padding: 10px;
        height: 90px;
        border: 1px solid #d0d0d0;
    }
    .decorate-icon{
        width: 30px;
        height: 30px;
        margin-right: 4px;
        border-radius: 50%;
        display: inline-block;
        background: #eee;
        /*border: 1px solid;*/
        text-align: center;
        line-height: 30px;
        font-size: 14px;
        cursor: pointer;
        color: white;
    }
    .decorate-icon a i{
        color:white;
    }
    .user-list, .invite-list{
        background: #eee;
        border:1px solid #d0d0d0;
        padding:10px;
    }
    .user-list{
        max-height: 150px;
        overflow-y: auto;
        width: 100%;
    }
    .border-radius-style{
        border-radius: 4px;
    }
    .user-avatar{
        width:24px;
        height:24px;
        border-radius: 50%;
    }
    .user-table{
        width:100%;
        table-layout: fixed;
    }
    .user-table tr{
        line-height: 30px;
    }
    .share-to-modal .select-options{
        padding:0;
        width: auto;
        border: none;
        box-shadow: none;
        display: inline-block;
        text-align: center;
        background: transparent;

        -webkit-appearance: button;
        -moz-appearance: button;
        appearance: button;
    }
    .select-options:focus {
        border-color: #66afe9;
        outline: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    .select-option-actions{
        width:100px;
        line-height: 32px;
        padding: 0 10px;
    }
    .select-option-actions .select-options{
        height: 32px;
        color: white;
    }
    .pos-relative{
        position: relative;
    }
    .cus-point{
        cursor: pointer;
    }
    #popover-qrcode.popover{
        display: block;
    }
    .tiny-qrcode{
        height:40px;
        width:40px;
        line-height: 40px;
        display: inline-block;
        top: 9px;
        left: 4px;
    }
    *[ng-click]{
        cursor: pointer;
    }


    .loading-for-link{
        min-height: 200px;
        line-height: 200px;
        text-align: center;
    }
    .hide{
        display: none !important;
    }
    
    #share-new-email::-ms-clear , #the-link::-ms-clear {
        display:none;
    }
    .user-name{
        display: inline-block;
        max-width: 38%;
        font-weight: 600;
    }
    .user-email{
        max-width: 58%;
        display: inline-block;
    }
    tr td{
        height: 30px;
    }
    .new-user{
        padding: 4px 6px;
        margin-top: 2px;
        margin-left: 6px;
        background: #eeeeee;
        line-height: 24px;
        height: 32px;
    }
    .new-user i{
        margin:4px;
    }
    .new-user-info{
        height: 24px;
        line-height: 24px;
    }
    .new-user-list span{
        display: inline-block;
    }
    .new-user-info{
        display: inline-block;
        max-width: 400px;
    }
    .user-input{
        margin-top: 4px;
        display: inline-block;
        /*vertical-align: middle;*/
        background: none;
        border: 0;
        font-family: arial,sans-serif;
        font-size: 13px;
        height: 23px;
        outline: 0;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 0 0 0 5px;
        position: relative;
        resize: none;
        width: 100%;
    }
    .feedback-ctrl{
        margin-top: 5px;
    }
    .new-user-list-container{
        background: white;border: 1px solid #ccc;border-radius: 4px;-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
        min-height: 34px;padding: 4px 2px 4px 2px;
        -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
        -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    }
    .caret-container{
        width: 16px;
        display: inline-block;
        /*background: #e6e6e6;*/
        border: 1px solid #bdbdbd;
        text-align: center;
        margin-left: 5px;
    }
    .cloud-reading-shared-modal.modal .caret{
        margin-left: 0;
    }
    #the-link[readonly]{
        background: #ffffff;
    }
    @media screen and (max-width: 500px){
        .user-avatar{
            display: none;
        }
    }
    .new-user{
        font-size: 12px;
    }
</style>
<div class="modal-body share-to-modal">

    <div class="loading-for-link text-center" ng-show="waitingForLink">
        <i class="fa fa-spinner fa-pulse"></i>
    </div>
    <div ng-show="!waitingForLink">
        <h5 class="pos-relative">
        <span class="" ng-show="isCpdfDoc">
            <span>(1)</span>
            <span ng-show="everyonePermission=='cmis:read'">{{ "all_can_view" | translate}}</span>
            <span ng-show="everyonePermission=='smx:none'">{{ "specific_can_view" | translate}}</span>
        </span>
        <span ng-show="!isCpdfDoc" type="button" class="dropdown-toggle cus-point" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span>(1)</span>
            <span ng-show="everyonePermission=='cmis:read'">{{ "all_can_view" | translate}}</span>
            <span ng-show="everyonePermission=='smx:none'">{{ "specific_can_view" | translate}}</span>
            <!--<span>{{ "enable_public_sharing" | translate }}</span>-->
            <!--<span>{{ everyonePermissionToActionMap[everyonePermission] }} </span>-->
            <span class="caret-container">
                <i class="fa fa-angle-down"></i>
                <!--<span class="caret"></span>-->
            </span>
        </span>
            <ul class="dropdown-menu">
                <li ng-repeat="(cmisPermission, permission) in everyonePermissionToActionMap" ng-hide="cmisPermission=='cmis:write'" ng-click="setEveryonePermission(cmisPermission)">
                    <a href="javascript:;" class="clearfix" ng-show="cmisPermission=='cmis:read'">
                        <span class="pull-left">{{ "all_can_view" | translate}}</span>
                        <i class="fa fa-check pull-right" style="margin-top: 4px;" ng-show="everyonePermission==cmisPermission"></i>
                    </a>
                    <a href="javascript:;" class="clearfix" ng-show="cmisPermission=='smx:none'">
                        <span class="pull-left" ng-show="cmisPermission=='smx:none'">{{ "specific_can_view" | translate}}</span>
                        <i class="fa fa-check pull-right" style="margin-top: 4px;" ng-show="everyonePermission==cmisPermission"></i>
                    </a>

                </li>
            </ul>
            <!--<select class="form-control select-options" ng-model="selectedPermission" ng-options="permission for permission in permissionList"></select>-->
        </h5>
        <div class="input-group">
            <input id="the-link" readonly type="text" tooltip-enable="tooltipIsOpen" tooltip-is-open="tooltipIsOpen" tooltip-class="copy-callback" uib-tooltip="{{ copy_status | translate}}" class="form-control" value="{{ fileLink }}">
              <span class="input-group-btn" ngclipboard-success="copyOnSuccess(e)" ngclipboard-error="copyOnError(e)" ngclipboard data-clipboard-target="#the-link" style="font-size: 14px">
                  <button class="btn btn-custom-primary">{{ 'copy' | translate }}</button>
              </span>
        </div>
        <div class="share-to pos-relative" ng-hide="isMobile || everyonePermission!=='cmis:read'">
        <span ng-show="showSendEmail">
            <span class="decorate-icon" ng-hide="device == 'foxitReader' && (OS=='mac' || OS=='linux')" style="background: #309a36;">
                <a class="mailTo" href="mailto:?body={{fileLink}}&subject={{file.name}}">
                <!--<a class="mailTo" href="mailto:?body={{emailBody}}&subject={{emailSubject}}">-->
                    <i class="fa fa-envelope-o" ng-click="shareTo('email',$event)"></i>
                </a>
            </span>
        </span>

        <span class="decorate-icon" style="background: #3a5897;" ng-click="shareTo('facebook')" >
            <i class="fa fa-facebook-f"></i>
        </span>
        <span class="decorate-icon" ng-click="shareTo('google')" style="background: #2ca0d9;">
            <i class="fa fa-google-plus"></i>
        </span>
        <span class="decorate-icon" ng-click="shareTo('twitter')" style="background: #0083be;">
            <i class="fa fa-twitter"></i>
        </span>
        <span class="decorate-icon" ng-click="shareTo('linkedin')" style="background: #df564c;">
            <i class="fa fa-linkedin"></i>
        </span>
        <span class="decorate-icon" ng-click="shareTo('weibo')" >
            <i class="fa fa-weibo" style="color: #cd201f;"></i>
        </span>
            <span class="tiny-qrcode pos-relative" ng-mouseenter="showQrcode()" ng-mouseleave="hideQrcode()" id="qrElement" qrcode height="30" width="30" url="{{ fileLink }}"></span>
            <div id="popover-qrcode" ng-show="showBigQrcode" class="popover ng-scope ng-isolate-scope bottom" style="top: 124px;left: 246px;" ng-style="styles">
                <div class="arrow"></div>
                <div class="popover-inner">
                    <div class="popover-content ng-binding" ng-bind="content"></div>
                </div>
            </div>
        </div>
        <div>
            <h5>
                <span>(2)</span>
                <span>{{ 'who_has_access' | translate }}</span>
            </h5>
            <div class="user-list border-radius-style">
                <table class="user-table table-fixed">
                    <thead class="th-pd-0">
                    <tr>
                        <th width="6%"><img class="user-avatar" src="" alt=""></th>

                        <th ng-if="everyonePermission!='smx:none'" class="long-words-handle" width="50%">{{ 'anyone_has_link' | translate }}</th>
                        <th ng-if="everyonePermission!='smx:none'" class="text-center" width="35%">{{ permissionToActionMap[everyonePermission] }}</th>

                        <th ng-if="everyonePermission=='smx:none'" class="long-words-handle" width="50%">{{ 'special_people' | translate }}</th>
                        <th ng-if="everyonePermission=='smx:none'" class="text-center" width="35%">{{ 'can_view' | translate }}</th>

                        <th width="5%"></th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="user in userList">
                        <td width="6%"><img class="user-avatar" ng-src="{{ user.userAvatar }}" alt=""></td>
                        <td width="50%">
                            <span title="{{ user.userName }}" class="user-name long-words-handle">{{ user.userName }}</span>
                            <span title="{{ user.userId }}" class="user-email long-words-handle">{{ user.userId }}</span>
                        </td>
                        <td width="35%" class="text-center">
                            <span ng-if="user.isOwner">{{ user.action }}</span>
                            <span uib-dropdown dropdown-append-to-body ng-if="!user.isOwner">
                                <span id="btn-append-to-to-body-{{ $index }}" class="cus-point" type="button" uib-dropdown-toggle>
                                    {{ user.action }}
                                    <!--<span class="caret"></span>-->
                                </span>
                                <!--<ul class="dropdown-menu" style="z-index: 1100;" uib-dropdown-menu role="menu" aria-labelledby="btn-append-to-to-body-{{ $index }}">-->
                                    <!--<li ng-repeat="(cmisPermission,permission) in permissionToActionMap" ng-click="setUserAction(user,cmisPermission)">-->
                                        <!--<a href="javascript:;">{{ permissionToActionMap[cmisPermission] }}</a>-->
                                    <!--</li>-->
                                <!--</ul>-->
                            </span>
                            <!--<span class="pos-relative dropup" ng-if="!user.isOwner">-->
                                <!--<span type="button" class="dropdown-toggle cus-point" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">-->
                                    <!--{{ user.action }} <span class="caret"></span>-->
                                <!--</span>-->
                                <!--<ul class="dropdown-menu">-->
                                    <!--<li ng-repeat="(cmisPermission,permission) in permissionToActionMap" ng-click="setUserAction(user,cmisPermission)">-->
                                        <!--<a href="javascript:;">{{ permissionToActionMap[cmisPermission] }}</a>-->
                                    <!--</li>-->
                                <!--</ul>-->
                            <!--</span>-->
                            <!--<select ng-if="!user.isOwner" class="form-control select-options" ng-model="user.action" ng-options="action for action in actionList"></select>-->
                            <!--<i ng-if="!user.isOwner" class="fa fa-caret-down"></i>-->
                        </td>
                        <td width="5%">
                            <span ng-if="!user.isOwner" ng-click="deleteEmail($index)"><i class="fa fa-times"></i></span>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div>
            <h5>{{ 'invite_others' | translate }}</h5>
            <div class="invite-list border-radius-style">
                <!--<div class="input-group">-->
                <div class="">
                    <div class="new-user-list-container">
                        <input-email
                                new-user-list="newUserList"
                                new-email="newEmail"
                                placeholder="placeholder"
                        ></input-email>
                        <!--<span class="new-user-list">-->
                            <!--<span class="new-user" ng-repeat="user in newUserList">-->
                                <!--<span class="new-user-info long-words-handle" ng-class="{'text-danger':!user.isValidEmail}" title="{{ user.userEmail }}">{{ user.userEmail }}</span>-->
                                <!--<i class="fa fa-times pull-right" ng-click="deleteUser($index)"></i>-->
                            <!--</span>-->
                        <!--</span>-->
                        <!--<textarea class="user-input" name="user-input" ng-blur="addNewUser()" ng-keydown="handleKeys($event)" ng-model="newEmail" placeholder="{{ 'enter_email_address' | translate }}"></textarea>-->
                    </div>
                    <!--<input id="share-new-email" type="text" class="form-control" ng-model="newEmail" ng-keypress="handleEnterKey($event)" placeholder="{{ 'enter_email_address' | translate }}">-->
                    <!--<textarea name="" class="textarea" ng-model="newEmail" ng-keypress="handleEnterKey($event)" placeholder="{{ 'enter_email_address' | translate }}"></textarea>-->
                    <span class="hide input-group-btn" style="vertical-align: top;">
                        <span type="button" class="btn btn-custom-primary dropdown-toggle" style="padding:10px 12px;pointer-events: none;border-top-right-radius: 0;border-bottom-right-radius: 0;" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            {{ permissionToActionMap[selectedPermission] }}
                            <!--<span class="caret"></span>-->
                        </span>
                        <!--<ul class="dropdown-menu">-->
                            <!--<li ng-repeat="(cmisPermission,permission) in permissionToActionMap" ng-click="setGlobalAction(cmisPermission)">-->
                                <!--<a href="javascript:;">{{ permission }}</a>-->
                            <!--</li>-->
                        <!--</ul>-->
                        <!--<span class="btn btn-default" ng-click="validateEmail()">-->
                            <!--<i class="fa fa-plus"></i>-->
                        <!--</span>-->
                    </span>
                </div>
                <div ng-if="errMsg" class="text-danger err-msg">{{ errMsg }}</div>
                <div ng-show="newEmail || newUserList.length>0">
                    <div style="margin-top: 10px">
                        <textarea name="" class="textarea" ng-model="postMessage" ng-attr-placeholder="{{ 'email_personal_msg' | translate }}"></textarea>
                    </div>
                    <div class="feedback-ctrl">
                        <label for="need-feedback" class="m-t-5">
                            <input type="checkbox" name="" id="need-feedback" ng-click="needFeedback()" ng-model="feedback">
                            <span>{{ 'i_want_feedback' | translate }}</span>
                        </label>
                        <button class="btn btn-default btn-sm m-l-5 pull-right" ng-disabled="requesting" ng-click="clearNewUserList()">{{ 'cancel' | translate }}</button>
                        <button class="btn btn-custom-primary btn-sm pull-right" ng-disabled="requesting" ng-click="saveNewUserList()">
                            <span>{{ 'send' | translate }}</span>
                            <span ng-show="savingNewUser"><i class="fa fa-spinner fa-pulse"></i></span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <h5>
                <label for="disable-download" class="cus-point">
                    <input id="disable-download" style="margin-right: 10px" type="checkbox" ng-click="changeDisableDownload()" ng-model="disableDownload"><span>{{ 'disable_download' | translate}}</span>
                </label>
            </h5>
        </div>
    </div>
</div>
<div class="modal-footer">
    <div class="alert alert-success alert-dismissable hide" ng-class="">
        <a href="javascript:;" class="close" ng-click="closeChangeTips()" >&times;</a>
        <p class="text-left">{{ 'changes_need_save' | translate }}</p>
    </div>
    <button class="btn btn-custom-primary hide-share-plugin" ng-show="file.description" ng-disabled="requesting" ng-click="stopShare()">{{ "stop_share" | translate }}
        <i ng-show="stopSharing" class="fa fa-spinner fa-pulse"></i>
    </button>
    <button ng-show="!changed" class="btn btn-custom-primary" type="button" ng-disabled="requesting" ng-click="ok()" >{{ "ok" | translate }}</button>
    <button ng-show="!waitingForLink && changed" class="btn btn-custom-primary" type="button" ng-click="ok()" ng-disabled="isDisabled() || requesting">
        <span>{{"save_changes" | translate }}</span>
        <i ng-show="settingShareInfo && changed" class="fa fa-spinner fa-pulse"></i>
    </button>
    <button ng-show="changed" class="btn btn-default" type="button" ng-click="cancel()">
        <span>{{"cancel" | translate }}</span>
    </button>
</div>